<template>
    <q-card class="weather-card">
      <q-card-section>
        <div class="weather-platform-title">{{ platName.label }}</div>
      </q-card-section>
      <q-separator />
      <q-list bordered v-for="(item,index) in weather" :key="index">

        <q-expansion-item expand-separator :label=item.dateTime class="weather-title">
          <q-scroll-area style="height: 250px; ">
          <div class="weather-rounded-borders">
            <div class="row">
              <div class="name-field text-center">
                <q-icon name="img:img/map/wd.png" size="xs" class="q-mr-xs" />温度
              </div>
              <div class="col text-center">{{item.minTemperature}}℃—{{item.maxTemperature}}℃</div>
            </div>
            <div class="row">
              <div class="name-field text-center">
                <q-icon name="mdi-weather-windy" size="xs" class="q-mr-xs" color="blue"/>风向
              </div>
              <div class="col text-center">(平均/最大)
                {{item.windMark}}</div>
            </div>
            <div class="row">
              <div class="name-field text-center">
                <q-icon name="mdi-weather-windy-variant" size="xs" class="q-mr-xs" color="blue"/>风速
              </div>
              <div class="col text-center">(平均/最大)
                {{item.windSpeed}}</div>
            </div>
            <div class="row">
              <div class="name-field text-center">
                <q-icon name="mdi-weather-rainy" size="xs" class="q-mr-xs" color="blue"/>降雨概率
              </div>
              <div class="col text-center">{{item.probability}}%</div>
            </div>
            <div class="row">
              <div class="name-field text-center">
                <q-icon name="mdi-weather-rainy" size="xs" class="q-mr-xs" color="blue"/>降雨量
              </div>
              <div class="col text-center">{{item.precipitation}}mm</div>
            </div>
            <div class="row">
              <div class="name-field text-center">
                <q-icon name="mdi-air-humidifier" size="xs" class="q-mr-xs" color="blue"/>相对湿度
              </div>
              <div class="col text-center">{{item.rHumidity}}%</div>
            </div>

          <div class="row">
              <div class="name-field text-center">
                <q-icon name="mdi-air-humidifier" size="xs" class="q-mr-xs" color="blue"/>海平面气压
              </div>
              <div class="col text-center">{{item.seaPressure}}mb</div>
            </div>
            <div class="row">
              <div class="name-field text-center">
                <q-icon name="mdi-cloud-search" size="xs" class="q-mr-xs" color="blue"/>云层量
              </div>
              <div class="col text-center">{{item.clouds}}%</div>
            </div>
          </div>
        </q-scroll-area>
        </q-expansion-item>

      </q-list>
    </q-card>
</template>

<script>
export default {
  components: {},
  props: {
    platName: Object
  },
  data() {
    return {

      weather: []
    };
  },
  watch: {
    platName(newValue,oldValue) {
      this.$axios.get(`/wea/platform/getSevenDayWeather?id=${this.platName.value}`).then((r) => {
        this.weather = r.result;
        console.log(r.result);
      });
    }
  },
  computed: {

  },
  methods: {
    initDict() {
      this.$axios.get(`/wea/platform/getSevenDayWeather?id=${this.platName.value}`).then((r) => {
        this.weather = r.result;
        console.log(r.result);
      });
    },
  },
  created() { },
  mounted() {
    this.initDict();
  },
};
</script>
<style lang="stylus">
.weather-card
  width 370px
  .weather-title
    background-color #c5e6f9
    color #5f5f5f
    font-size 14px
    font-weight 700
    line-height normal
    margin-bottom 1px
  .weather-rounded-borders
    .name-field
      width 160px
      display block
      span
        width 20px
    div
      height 58px
      line-height 58px
      background-color #f9f9f9
      font-size 14px
      color #5f5f5f
    div:nth-child(odd)
      div:first-child
        background-color #e9f8ff
    div:nth-child(even)
      div:nth-child(2)
        background-color #e9f8ff
</style>
